<template>
  <div class="order">
    <LayoutHeader title="订单" />
    <div class="content">
      <van-tabs color="#ffc400">
        <van-tab v-for="(item, index) in navData" :key="index" :title="item">
          <div
            v-for="(i, index) in store.state.orderListEnd"
            :key="index"
            v-if="item === '全部' && store.state.orderListEnd.length > 0"
          >
            <van-card
              :num="i.num"
              :price="i.price"
              :title="i.title"
              :thumb="i.pic"
            />
          </div>

          <div v-else>
            <Empty />
          </div>
        </van-tab>
      </van-tabs>
    </div>

    <LayoutFooter />
  </div>
</template>

<script>
import LayoutHeader from "../../components/LayoutHeader.vue";
import LayoutFooter from "../../components/LayoutFooter.vue";
import Empty from "../../components/Empty.vue";

import { reactive, toRefs } from "vue";
import { useStore } from "vuex";

export default {
  components: {
    LayoutHeader,
    LayoutFooter,
    Empty,
  },
  setup() {
    const store = useStore();

    const data = reactive({
      navData: ["全部", "交易完成", "待付款", "待发货", "已发货"],
    });

    return {
      ...toRefs(data),
      store,
    };
  },
};
</script>

<style lang="less" scoped>
.order {
  display: flex;
  flex-flow: column;
  height: 100%;
  font-size: 12px;
  .content {
    flex: 1;
    overflow-y: auto;
  }
}
</style>
